<template>

  <div class="jyjc-left">
    <div class="jyjc-left-top">
      <div class="jyjc-left-top-bg">
        <img src="@/assets/img/jyjc/leftop.png" alt="">
      </div>
      <div class="jyjc-left-top-con">
        <div class="jyjc-left-top-con-item" v-for="item in 4" :key="item">
          <img src="../../../../../assets/img/jyjc/dushanyuan.png" />
          <div class="jyjc-left-top-con-item-text">
            <div>87856人</div>
            <div style="font-size: 14px;">死亡人数</div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="jyjc-left-con">
      <div class="jyjc-left-top-bg">
        <img src="@/assets/img/jyjc/renwu.png" alt="">
      </div>
      <div class="lefthead_con_right" @click="Dispatchtask">派遣任务</div>
      <!--  -->
      <div class="righttop_con">
        <div class="righttop_con_box">
          <div class="righttop_con_box-item" v-for="(item, index) in simulationdisList" :key="index">
            <img src="../../../../../assets/img/mnxl/righttopimg.png" class="righttop_con_box_item_img" />

            <div class="righttop_con_box_item_left_img">
              <div class="righttop_con_box_item_text">
                <div style="font-size: 1rem;">{{ item.taskName }}</div>
                <div style="font-size:calc(12 / 16 * 1rem) ;">{{ item.taskLeader }} {{ item.taskContent }}</div>
              </div>
              <div class="btn" :class="{ 'btn-red': item.taskStatus === '处理中', 'btn-green': item.taskStatus === '已完成' }"
                @click="Dispatchitembtn(item)">{{ item.taskStatus }}</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="jyjc-left-bottom">
      <div class="jyjc-left-top-bg">
        <img src="@/assets/img/jyjc/yixu.png" alt="">
      </div>
      <!--  -->
      <div class="jyjc-left-bottom-swp">
        <swiper :direction="'vertical'" :slidesPerView="4" :spaceBetween="0" :loop="true"
          :autoplay="{ delay: 500, disableOnInteraction: false }" :speed="500" class="swiper-table"
          :modules="[Autoplay]">
          <swiper-slide v-for="(item, index) in accidentTableData" :key="index" class="swiper-slide-item">
            <div class="swiper-slide-item-text">
              <div class="swiper-slide-item-left">
                <div class="swiper-slide-item-left-icon">
                  {{ index + 1 }}
                </div>
                <div class="swiper-slide-item-left-text">
                  吃碘药对预防XX管用吗？
                </div>
              </div>
              <div class="swiper-slide-item-right">名字</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="mnxl-left-img">
    <el-popover placement="top-start" popper-class="jyjc-left-img-popover" :width="150" trigger="click">
      <template #reference>
        <img class="mnxl-left-img-img" src="../../../../../assets/img/mnxl/lefticon.png" />
      </template>
      <div class="mnxl-left-img-title">地图显示</div>

      <div v-for="(item, index) in iconItems" :key="item.id" class="mnxl-left-img-item" @click="toggleIcon(index)">
        <div class="mnxl-left-img-item-icon" v-show="!item.visible"></div>
        <img class="mnxl-left-img-item-show" src="../../../../../assets/img/mnxl/lefticonttrue.png"
          v-show="item.visible" />
        <div class="mnxl-left-img-item-text">{{ item.text }}</div>
      </div>
    </el-popover>
  </div>
  <!--  -->

  <Eldioa :headtext="Eldioaform.headtext" :dialogVisible="editdialogVisible" @eddialogVisible="updateDialogVisible"
    :elwidth="Eldioaform.elwidth" :elheight="Eldioaform.elheight">
    <template #dialogbody>
      <Elfrom :form-config="editformdataconfig" v-model="editform" :show-actions="false" @elsubmit="elsubmitbtn"
        @selectChange="selectChange" ref="editformRef" />

      <div class="dialog-footer" style="text-align: right;">
        <el-button type="primary" style="background: rgba(4, 134, 254, 1);" @click="elhandleSubmit">
          {{ Eldioaform.headtext == '任务详情' ? '任务完成' : '确认' }}
        </el-button>

        <el-button style="background: transparent;border:1px solid rgba(89, 175, 249, 0.70);color:rgba(1, 194, 255, 1)"
          @click="handleCancel">
          取消
        </el-button>

        <el-button v-if="Eldioaform.headtext == '任务详情'" type="primary" style="background: rgba(4, 134, 254, 1);"
          @click="handleCancel">
          确认
        </el-button>

      </div>

    </template>
  </Eldioa>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue'
import formConfig from './mnformconfig'
import { postsimulationtask, getsimulationdisList, getsimulationdisListId, putsimulationsuccListId, getteamName, getteamNameGroup } from '@/api'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
import Eldioa from '@/components/eldioa/index.vue'
import Elfrom from '@/components/elfrom/index.vue'




const accidentTableData = ref([

  {
    id: '1',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },
  {
    id: '2',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },
  {
    id: '3',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },
  {
    id: '4',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },
  {
    id: '5',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },

  {
    id: '6',
    name: 'asdasdadasdasda',
    text: 'ccccc'
  },

])






//
const simulationdisList = ref([])
const getsimulationdisListapi = async () => {
  const { data } = await getsimulationdisList()
  simulationdisList.value = data
}


const Dispatchtask = async () => {

  editdialogVisible.value = true
  Eldioaform.value.headtext = '派遣任务'
  Eldioaform.value.formtype = '派遣任务'
  Eldioaform.value.elheight = 400

  const teamName = await getteamName()

  editformdataconfig.value[1].columns[1].options = teamName.data

  resetFieldsform(editform.value, editformdata.value)

  setTimeout(() => {
    editformRef.value?.clearValidate()
  }, 100)

}



const Dispatchitembtn = async (btndata) => {

  editdialogVisible.value = true

  Eldioaform.value.headtext = '任务详情'
  Eldioaform.value.formtype = '任务详情'
  Eldioaform.value.elheight = 550
  await resetFieldsform(editform.value, editformdata.value)


  const { data } = await getsimulationdisListId(btndata.id)

  await Object.assign(editform.value, data);


}


const selectChange = async (props) => {

  if (props.prop == "rescueTeam") {

    const teamNameGroup = await getteamNameGroup({ teamName: props.value })

    editform.value.taskLeader = teamNameGroup.data.leader

    editformdataconfig.value[3].columns[0].options = teamNameGroup.data.personList
  }

}




const Eldioaform = ref({
  headtext: '派遣任务',
  elwidth: 746,
  elheight: 400,
  formtype: '新增'
})




const editdialogVisible = ref(false)

const updateDialogVisible = (newValue) => {
  editdialogVisible.value = newValue
  editformRef.value.handleReset()
  resetFieldsform(editform.value, editformdata.value)
}



const editformdataconfig = computed(() => {

  let formconfig = null
  switch (Eldioaform.value.formtype) {
    case '派遣任务':

      formconfig = formConfig.TemplateGeneration
      break;

    case '任务详情':
      formconfig = formConfig.TemplateGenerationitem
      break;

  }


  return formconfig

})

// 表单数据
const editformdata = computed(() => {
  let formdata = null
  switch (Eldioaform.value.formtype) {
    case '派遣任务':
      formdata = formConfig.TemplateGenerationdata

      break;
    case '任务详情':
      formdata = formConfig.TemplateGenerationitemdata

      break;

  }

  return formdata
})


// 表单数据
const editform = ref({ ...editformdata.value })

const editformRef = ref()

// 根据按钮属性提交表单
const elsubmitbtn = async (editsubdata) => {
  console.log('editsubdata', editsubdata)

  switch (Eldioaform.value.formtype) {
    case '派遣任务':
      const mnxl_simulateEventType = sessionStorage.getItem('mnxl_simulateEventType')
      editsubdata.simulateEventType = mnxl_simulateEventType || 'H辐射'
      await postsimulationtask(editsubdata)
      await getsimulationdisListapi()

      break;
    case '任务详情':
      await putsimulationsuccListId(editsubdata.id)
      await getsimulationdisListapi()
      break;
  }
  resetFieldsform(editform.value, editformdata.value)
  handleCancel()
}


// 确认表单
const elhandleSubmit = async () => {
  if (!editformRef.value) return
  try {
    await editformRef.value.handleSubmit()
  } catch (error) {
    console.error('表单提交失败:', error)
  }
}


// 关闭
const handleCancel = () => {
  if (!editformRef.value) return
  editformRef.value.handleReset()
  editdialogVisible.value = false
  resetFieldsform(editform.value, editformdata.value)
}

// 重置表单
const resetFieldsform = (form, comform) => {

  Object.keys(form).forEach(key => {

    if (key in comform) {
      form[key] = comform[key]
    } else {
      form[key] = ''

    }

  })


}

onMounted(() => {

  getsimulationdisListapi()
})
// 图标数据数组
const iconItems = ref([
  { id: 1, text: '监控设备', visible: false },
  { id: 2, text: '伤亡人员', visible: false },
  { id: 3, text: 'XX区域', visible: false }
])

// 切换图标显示状态的方法
const toggleIcon = (index) => {
  iconItems.value[index].visible = !iconItems.value[index].visible
}
</script>

<style lang="less" scoped>
.jyjc-left {
  position: absolute;
  left: 0;
  width: 430px;
  z-index: 2;
  // background: red;
  height: calc(100vh - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  /* 隐藏滚动条但仍可滚动 */
  scrollbar-width: none;

  margin-left: 35px;

  .jyjc-left-top {
    height: 260px;
    background: rgba(21, 33, 86, 0.6);



    .jyjc-left-top-con {
      height: 150px;
      padding: 38px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .jyjc-left-top-con-item {
        width: 150px;
        height: 54px;
        display: flex;
        margin-top: 42px;
        align-items: center;

        // margin-left: 33px;

        img {
          height: 54px;
          height: 54px;
        }

        .jyjc-left-top-con-item-text {
          margin-left: 8px;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 22px;
          color: rgba(255, 255, 255, 0.87);
          line-height: 24px;
          text-shadow: 0px 1px 11px rgba(242, 32, 27, 0.68);

        }

      }

      .jyjc-left-top-con-item:nth-child(1) {
        margin-top: 0;
      }

      .jyjc-left-top-con-item:nth-child(2) {
        margin-top: 0;
      }


    }
  }

  .jyjc-left-con {
    width: 100%;
    height: 406px;
    background: rgba(21, 33, 86, 0.6);
    position: relative;
    margin-top: 24px;



    .righttop_con {
      height: 360px;

      .righttop_con_box {
        padding: 20px;
        height: calc(4 * 62px + 3 * 30px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        gap: 10px;
        /* 隐藏滚动条但仍可滚动 */
        scrollbar-width: none;


        /* IE and Edge */
        .righttop_con_box-item {
          display: flex;
          width: 100%;
          height: 62px;
          // background: pink;
          align-items: center;
          flex-shrink: 0;
          justify-content: space-between;
          margin-top: 8px;

          .righttop_con_box_item_img {
            width: 54px;
            height: 54px;
            position: relative;
            right: -13px;
          }

          .righttop_con_box_item_left_img {
            width: 352px;
            height: 100%;
            display: flex;
            background: url(/src/assets/img/mnxl/righttopbg.png);
            background-size: 100% 100%;
            justify-content: space-between;
            align-items: center;
            padding-left: 25px;

            .righttop_con_box_item_text {
              margin-left: 15px;
              color: #fff;
            }
          }

          .btn {
            width: 70px;
            height: 26px;
            border-radius: 14px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            margin-right: 30px;
          }

          .btn-red {
            color: rgba(255, 11, 14, 1);
            background: linear-gradient(90deg, rgba(255, 83, 83, 0.55) 0%, rgba(255, 142, 142, 0.12) 100%);
          }

          .btn-green {
            color: rgb(0, 255, 115);
            background: linear-gradient(90deg, rgba(102, 255, 0, 0.55) 0%, rgba(0, 255, 85, 0.12) 100%);

          }
        }

        .righttop_con_box-item:first-child {
          margin-top: 0;
        }


      }

      /* 隐藏 Webkit 浏览器的滚动条 */
      .righttop_con_box::-webkit-scrollbar {
        display: none;
      }
    }

    .lefthead_con_right {
      position: absolute;
      top: 15px;
      right: 31px;
      z-index: 3;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }

  .jyjc-left-top-bg {
    padding-left: 3px;
    width: 100%;
    height: 46px;
    background-image: url('@/assets/img/jsc/lefthead.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    img {
      width: 102px;
      height: 26px;
      position: absolute;
      top: 10px;
      left: 12px;
    }
  }

  .jyjc-left-bottom {
    height: 246px;
    background: rgba(21, 33, 86, 0.6);
    margin-top: 20px;

    .jyjc-left-top-bg {
      background-image: url('@/assets/img/jyjc/yixuebg.png');

      img {
        width: 120px;
        height: 22px;
      }
    }

    .jyjc-left-bottom {
      height: 246px;
      background: rgba(21, 33, 86, 0.6);
      margin-top: 20px;

      .jyjc-left-bottom-swp {
        height: 220px;

        // margin-top: 18px;
        .swiper-table {
          height: 185px;
          width: 100%;
          margin-top: 5px;
          z-index: 3;

          .swiper-slide-item {
            height: 30px !important;
            margin-top: 15px;

            .swiper-slide-item-text {
              display: flex;
              height: 100%;
              width: 100%;
              padding-left: 20px;
              padding-right: 20px;
              align-items: center;
              justify-content: space-between;

              .swiper-slide-item-left {
                display: flex;
                align-items: center;

                .swiper-slide-item-left-icon {
                  width: 24px;
                  height: 24px;
                  font-size: 12px;
                  line-height: 24px;
                  border-radius: 50%;
                  color: #fff;
                  text-align: center;
                  background: #1F4F84;
                }

                .swiper-slide-item-left-text {
                  margin-left: 10px;
                  font-size: 16px;
                  font-weight: bold;
                  color: #01C2FF;
                  line-height: 28px;

                }
              }

              .swiper-slide-item-right {

                font-size: 14px;
                color: #A8D6FF;
                line-height: 21px;

              }
            }
          }

          .swiper-active {
            border: 1px solid #18fefe;
          }
        }

      }
    }



    .jyjc-left-bottom-swp {
      height: 220px;

      // margin-top: 18px;
      .swiper-table {
        height: 185px;
        width: 100%;
        margin-top: 5px;
        z-index: 3;

        .swiper-slide-item {
          height: 30px !important;
          margin-top: 15px;

          .swiper-slide-item-text {
            display: flex;
            height: 100%;
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            align-items: center;
            justify-content: space-between;

            .swiper-slide-item-left {
              display: flex;
              align-items: center;

              .swiper-slide-item-left-icon {
                width: 24px;
                height: 24px;
                font-size: 12px;
                line-height: 24px;
                border-radius: 50%;
                color: #fff;
                text-align: center;
                background: #1F4F84;
              }

              .swiper-slide-item-left-text {
                margin-left: 10px;
                font-size: 16px;
                font-weight: bold;
                color: #01C2FF;
                line-height: 28px;

              }
            }

            .swiper-slide-item-right {

              font-size: 14px;
              color: #A8D6FF;
              line-height: 21px;

            }
          }
        }

        .swiper-active {
          border: 1px solid #18fefe;
        }
      }

    }
  }



}




.mnxl-left-img {
  position: absolute;
  bottom: 33px;
  z-index: 3;
  left: 475px;


  .mnxl-left-img-img {
    width: 42px;
    height: 42px;
    cursor: pointer;
  }



}



.mnxl-left-img-title {
  font-size: 18px;
  color: #64B2FF;
  line-height: 25px;
  margin-bottom: 10px;
}

.mnxl-left-img-item {
  display: flex;
  font-size: 14px;
  color: #A8D6FF;
  line-height: 20px;
  align-items: center;
  margin: 8px 0;
  cursor: pointer;

  .mnxl-left-img-item-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2D4F67;

    margin-right: 14px;
    border: 1px solid #fff;
  }

  .mnxl-left-img-item-show {
    width: 16px;
    height: 16px;
    margin-right: 14px;

  }


  .mnxl-left-img-item-text {}
}
</style>


<style>

.jyjc-left-img-popover {
  background: RGBA(15, 32, 48, 0.6) !important;
  border: none;
  border-bottom: 2px solid RGBA(100, 178, 255, 1);
}

.jyjc-left-img-popover.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  border: none;
  border-bottom: 2px solid RGBA(100, 178, 255, 1) !important;
      background: linear-gradient(315deg, #64b2ff 50%, #0b1a2c 50%);
}
</style>